<template>
  <form-create
    v-model="fApi"
    :rule="rule"
    :option="option"
    :value.sync="ivalue"
  ></form-create>
</template>

<script>
import { maker } from "@form-create/element-ui";
import { parseConfig } from "@/utils/utils";

export default {
  components: {},
  data() {
    return {
      //实例对象
      fApi: {},
      //表单数据
      ivalue: {},
      //表单生成规则
      rule: [],
      //组件参数配置
      pprops: null,
      poptions: null,
      option: {
        form: {
          labelPosition: "right",
          size: "mini",
          labelWidth: "128px",
          hideRequiredAsterisk: false,
          showMessage: true,
          inlineMessage: false,
          labelSuffix: ':'
        },
        row: {
          gutter: 0,
          type: "flex",
          align: undefined,
          justify: "center",
        },
        //表单提交事件
        submitBtn: false,
      },
    };
  },
  props: {
    props: {
      type: Object,
      default() {
        return {
          tab: String,
          field: String,
          title: String,
          props: [Object, String],
          col: Object,
          options: [Array, String, Object],
          validate: Array,
        };
      },
    },
    value: [Object, String, Number, Array, Boolean],
  },
  watch:{
    props() {
      this.option.form.labelWidth = this.props.col.labelWidth || '127px'
      this.pprops = parseConfig(this.props.props || {}, {}, this);
      this.poptions = parseConfig(this.props.options, {}, this);
      this.generateForm();
    }
  },
  methods: {
    getConfigForm() {
      return [
        {
          type: "select",
          field: "tab",
          title: "组件类型",
          value: this.props.tab,
          options: [
            {
              label: "input",
              value: "input",
            },
            {
              label: "InputNumber",
              value: "InputNumber",
            },
            {
              label: "radio",
              value: "radio",
            },
            {
              label: "checkbox",
              value: "checkbox",
            },
            {
              label: "select",
              value: "select",
            },
            {
              label: "switch",
              value: "switch",
            },
            {
              label: "cascader",
              value: "cascader",
            },
            {
              label: "DatePicker",
              value: "DatePicker",
            },
            {
              label: "TimePicker",
              value: "TimePicker",
            },
            {
              label: "upload",
              value: "upload",
            },
            {
              label: "slider",
              value: "slider",
            },
            {
              label: "tree",
              value: "tree",
            },
          ],
        },
        {
          type: "input",
          field: "field",
          title: "组件字段",
          value: this.props.field,
        },
        {
          type: "input",
          field: "title",
          title: "组件标签",
          value: this.props.title,
        },
        {
          type: "vue-json-editor",
          field: "props",
          title: "组件参数",
          value: this.props.props,

        },
        {
          type: "vue-json-editor",
          field: "options",
          title: "组件参数-列表",
          value: this.props.options,

        },
        {
          type: "object",
          field: "col",
          title: "格式",
          value: this.props.col,

          props: {
            rule: [
              {
                type: "input",
                field: "labelWidth",
                title: "标签长度",
                value: "128px",
              },
            ],
          },
        },
        {
          type: "vue-json-editor",
          field: "validate",
          title: "验证",
          value: this.props.validate,

        },
      ];
    },
    generateForm() {
      this.rule = [
        maker
          .create(this.props.tab, this.props.field, this.props.title)
          .props(this.pprops)
          .value(this.value)
          .col(this.props.col)
          .on({
            change: this.valueChange,
          })
          .validate(this.props.validate)
          .options(this.poptions),
      ];
    },
    valueChange(v) {
      // console.log(v)
      this.$emit("update:value", this.ivalue[this.props.field]);
    },
    setValue(i, v) {
      // const p = Object.assign({}, this.props)
      console.log(v)
      this.$emit('update:props', v)
    },
  },
  async mounted() {
    this.option.form.labelWidth = this.props.col.labelWidth || '128px'
    this.pprops = parseConfig(this.props.props || {}, {}, this);
    this.poptions = parseConfig(this.props.options, {}, this);
    this.generateForm();
  },
};
</script>

<style lang="less">

</style>